<template>
    <view class="release-container">
        <header-vue :back="true" bgColor="transparent"></header-vue>
        <view class="title-box">
            <!-- 装饰图标 -->
            <image class="title-icon" :src="IMAGE_URL + '/static/community/icon1.png'" mode="aspectFit"></image>
            
            <view class="title-text">Hi，很高兴见到你</view>
            <view class="title-text2">请问你想？</view>
        </view>

        <view class="release-box">
            <view class="release-item release-item1" @click="goRelease('/views/community/dynamic')">
                <!-- 装饰图标 -->
                <image class="release-icon" :src="IMAGE_URL + '/static/community/icon2.png'" mode="aspectFit"></image>
                
                <view class="release-item-title">
                    <text>发布动态</text>
                </view>
                <view class="release-item-content">
                    <text>分享生活点滴，共建温暖社区</text>
                </view>
            </view>
            <view class="release-item release-item2" @click="goRelease('/views/community/real-time-info')">
                <!-- 装饰图标 -->
                <image class="release-icon" :src="IMAGE_URL + '/static/community/icon3.png'" mode="aspectFit"></image>
                
                <view class="release-item-title">
                    <text>发布社区资讯</text>
                </view>
                <view class="release-item-content">
                    <text>让重要信息传递到每个居民</text>
                </view>
            </view>
            <view class="release-item release-item3" @click="goRelease('/views/community/activity')">
                <!-- 装饰图标 -->
                <image class="release-icon" :src="IMAGE_URL + '/static/community/icon4.png'" mode="aspectFit"></image>
                
                <view class="release-item-title">
                    <text>发布社区活动</text>
                </view>
                <view class="release-item-content">
                    <text>创建暖心活动，共建活力社区</text>
                </view>
            </view>
            <view class="release-item release-item4" @click="goRelease('/views/community/idle')">
                <!-- 装饰图标 -->
                <image class="release-icon" :src="IMAGE_URL + '/static/community/icon5.png'" mode="aspectFit"></image>
                
                <view class="release-item-title">
                    <text>发布闲置</text>
                </view>
                <view class="release-item-content">
                    <text>闲置变现so easy邻里，交易更放心</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import appConfig from '@/config/app.js'
export default {
    name: 'release',
    components: {
        headerVue
    },  
    data() {
        return { IMAGE_URL: appConfig.IMAGE_URL }
    },
    methods: {
        goRelease(url) {
            uni.redirectTo({
                url: url
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.release-container {
    width: 100%;
    height: 100%;
    
    .title-box {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0 32rpx;
        box-sizing: border-box;
    }

    .title-icon {
        position: absolute;
        top: -40rpx;
        left: 152rpx;
        width: 141rpx;
        height: 185rpx;
        z-index: 1;
    }
    .title-text {
        font-size: 28rpx;
        color: #666666;
    }
    .title-text2 {
        font-size: 40rpx;
        color: #333333;
        font-weight: bold;
        margin-top: 10rpx;
    }

    .release-box {
        width: 100%;
        height: 100%;
        margin-top: 80rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
    }
    .release-item {
        position: relative;
        width: 100%;
        height: 178rpx;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        padding: 40rpx 0 0 40rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;

        &.release-item1 {
            background: #3DB7FF;
        }
        &.release-item2 {
            background: #FFBD52;
        }
        &.release-item3 {
            background: #00D469;
        }
        &.release-item4 {
            background: #FF919B;
        }
    }

    .release-icon {
        position: absolute;
        top: 50%;
        right: 26rpx;
        transform: translateY(-50%);
        width: 197rpx;
        height: 173rpx;
        z-index: 1;
    }
    .release-item-title {
        font-size: 36rpx;
        color: #FFFFFF;
        font-weight: bold;
    }

    .release-item-content {
        font-size: 24rpx;
        color: #FFFFFF;
        margin-top: 16rpx;
    }
}
</style>